<template>

  <div class="wrapper">
    <scroller class="scroll-wrap">
      <div id="wmain">
        <!-- <image class="image" style="width:750px;height:312px;" resize="cover" src="./static/images/help.jpg"></image> -->
       <!-- 轮播图 -->
        <slider class="slider" interval="3000" auto-play="true">
          <div class="frame">
            <image class="image" style="width:750px;height:312px;" resize="cover" :src="imageSrc+'/Image/help.jpg'"></image>
          </div>
          <div class="frame">
            <image class="image" style="width:750px;height:312px;" resize="cover" :src="imageSrc+'/Image/fankui.jpg'"></image>
          </div>
        </slider>
      <div class="top-nav bb8">
        <div class="top-nav-list">
          <a @click="openLink(jump+'/Course/mySubscribeCourse.html')" class="top-nav-a">
            <image style="width: 86px;height: 86px;" :src="imageSrc+'/Image/ip1.png'"></image>
            <text class="top-nav-txt">我的必修</text>
          </a>
        </div>
        <div class="top-nav-list">
          <a @click="openLink(jump+'/Mine/startCourse.html')" class="top-nav-a">
            <image style="width: 86px;height: 86px;" :src="imageSrc+'/Image/ip2.png'"></image>
            <text class="top-nav-txt">微课制作</text>
          </a>          
        </div>
        <div class="top-nav-list">
          <a @click="openLink(jump+'/Course/courseCenters.html?courseIndex=0')" class="top-nav-a">
            <image style="width: 86px;height: 86px;" :src="imageSrc+'/Image/ip3.png'"></image>
            <text class="top-nav-txt">学习课库</text>
          </a>          
        </div>
        <div class="top-nav-list">
          <a @click="openLink(jump+'/Reading/bookList.html')" class="top-nav-a">
            <image style="width: 86px;height: 86px;" :src="imageSrc+'/Image/ip4.jpg'"></image>
            <text class="top-nav-txt">读书推荐</text>
          </a>          
        </div>
      </div>
      <!-- 党建模块 Start-->
      <div id="ccp-wrap" v-if="ccp">
        <div class="ccp bb8">
          <a class="ccp-a" href="./subjectCourse.html?specialTrainingId=xxx">
            <div class="ccp-left">
              <text class="icon icon-dang">&#xe69c;</text>
              <text class="ccp-txt">党建</text>
            </div>
            <div class="ccp-right">
              <div class="ccp-right-top">
                <text>{{ccpInfo.title}}</text>
                <text class="icon ccp-new">&#xe69f;</text>
              </div>
              <text v-if="ccpInfo.startTime" class="ccp-date">学习时间：{{ ccpInfo.startTime.substr(0,10) }}</text>
            </div>
            <text class="icon ccp-right-arrow">&#xe60d;</text>
          </a>
        </div>
      </div>
      <!-- 党建模块 End-->
      <!-- 打卡 start-->
      <div class="punchCard" style="position: relative;">
        <div class="clockLog" :data-clockid="punchCard.uuid">
          <image style="width: 80px;height: 80px;" class="cardimg" :src="imageSrc+'/Image/study.png'"></image>
          <div class="clock-desc">
            <div class="clock-line"></div>
            <div class="clock-txt">
              <text class="clock-title"> {{punchCard.title}} </text>
              <div class="clockLogtime flex-row">
              <text class="icon clock-shijian">&#xe6b8;</text>
                <text class="clock-date">{{ punchCard.clockTime }}</text>
              </div>
            </div>
          </div>
          <text class="icon clock-right-arrow">&#xe60d;</text>
        </div>
        <!-- 已打卡标识 -->
        <div v-if="isCard" class="completeicon" style="position: absolute;top: 0;right: 40px;width: 100px;">
          <image style="width: 100px;height:72px" id="complete" class="complete" :src="imageSrc+'/Image/clockLog.png'"></image>
        </div>
        <!-- 打卡列表 -->
        <div class="clockLogList">
          <text class="clock-new">最新打卡:</text>
          <div class="punchCardList">
            <template v-for="item in punchCardList">
              <image v-if="item.avatar" class="headImg" :src="item.avatar"></image>
              <text v-else class="headImg" :style="{backgroundColor: item.avatarColour}">{{item.userName.substr(-2)}}</text>
            </template>
          </div>
        </div>
      </div>
      <!-- 打卡 end-->
      <div class="enterprise choose-lesson">
        <a href="courseCenters.html?courseIndex=0" class="cupdate">
          <text class="weight">选课中心</text>
          <!-- <p>{{courseUpdateData.updateTime}}有<strong> {{courseUpdateData.num}} </strong>部更新<i class="icon iconfont icon-comiisyoujiantou"></i></p> -->
         <div class="update-wrap">
           <text class="update-txt">{{courseUpdateData.updateTime}}有</text>
           <text class="update-num">{{courseUpdateData.num}}</text>
           <text class="update-txt">部更新</text>
           <i class="icon iconfont icon-comiisyoujiantou"></i>
           <text class="icon choose-arr">&#xe60d;</text>
         </div>
        </a>
      </div>
      <!-- 四个分类 -->
      <div class="type-wrap">
        <div class="ctype">
          <a href="" v-for="item in categoryList" :key="item.uuid" class="ctype-a">
            <text class="ctype-list">{{item.name.substr(0,4)}}</text>
          </a>
          <a href="" class="ctype-a"><text class="ctype-list">更多</text></a>
        </div>
      </div>
    
      <!-- 选课中心列表 -->
      <div class="select-lesson" >
            <div class="course" v-for="item in courseList" :key="item.uuid">
              <a v-if="item.type == 'imageAndAudio'" href="../Mine/courseDetails.html?courseId=item.sourceId">
                <div class="por">
                  <image :src="item.middlePicture" style="width304px;height:196px;"></image>
                  <text v-if="item.communicateTime.substr(0,1)!=0" class="course-time" style="lines:1;">交流时间:{{item.communicateTime}}</text>
                </div>
                <div class="w-tit flex-row"><text class="wei-txt">微</text><text class="wei-title">{{ item.title }}</text></div>
                <div class="w-teacher">
                  <div v-if="item.teacherName" class="flex-row">
                    <text class="w-js">讲师：</text> <text class="w-tname">{{ item.teacherName }}</text>
                  </div>
                  <div v-else class="flex-row">
                    <text class="w-js">讲师：</text> <text class="w-tname">{{ item.createdUserName }}</text>
                  </div>
                  <div class="w-num flex-row course-people">
                    <template v-if="item.clickNum > 9999">
                      <text class="icon w-renshu">&#xe6b6;</text>
                      <text>9999+</text>
                    </template>

                    <template v-else>
                    <text class="icon w-renshu">&#xe6b6;</text>
                      <text class="course-pnum">{{item.clickNum}}</text>
                    </template>
                  </div>
                </div>
              </a>
              <!-- 根据课件类型不同跳转不同链接 -->
             <!--  {{# if(d[i].type == 'normal'){ }}
             <a href="./courseDetail.html?courseId={{ d[i].uuid }}&type=course">
             {{# }else if(d[i].type == 'document'){ }}
             <a href="../Document/documentCourseDetail.html?courseId={{ d[i].uuid }}">  -->
              <!-- 判断是课程类型 -->
              <a href="" v-else>
                <div class="course-img">
                  <image :src="item.middlePicture" style="width304px;height:196px;"></image>
                </div>
                <text class="course-title">{{item.title}}</text>
                 <div class="course-star">
                 <!-- 课程评分 -->
                  <div class="flex-row course-flex-wrap">
                    <!-- 无分数时默认五星 -->
                    <template v-if="item.totalScore=='0.0'">
                      <text class="icon course-all-star lorange" v-for="n in 5" :key='n'>&#xe64a;</text>
                    </template>

                    <!-- 分数为整数时 -->
                    <template v-else-if="item.totalScore.substr(-1)==0" >
                      <text class="icon course-all-star lorange" v-for="n in item.totalScore.substr(0,1)" :key="n">&#xe64a;</text>
                      <text class="icon course-empty-star lorange" v-for="i in (5-item.totalScore)" :key="i">&#xe6c9;</text> 
                    </template>

                    <!-- 分数带小数时 -->
                    <template v-else>
                      <text class="icon icourse-all-star" v-for="n in item.totalScore.substr(0,1)" :key="n">&#xe64a;</text>
                      <text class="icon course-half-star lorange">&#xe6b0;</text>  
                      <text class="icon course-empty-star lorange" v-for="i in Math.floor(5-item.totalScore)" :key="i">&#xe6c9;</text> 
                    </template>

                  </div>

                  <!-- 课程学习人数 -->
                  <div class="course-people">
                    <template v-if="item.clickNum > 9999">
                      <text class="icon w-renshu">&#xe6b6;</text>
                      <text class="course-pnum">9999+</text>
                    </template>

                    <template v-else>
                      <text class="icon w-renshu">&#xe6b6;</text>
                      <text class="course-pnum">{{item.clickNum}}</text>
                    </template>
                  </div>
                </div>
              </a>
            </div>
              <!-- 无课程时显示引导课程 -->
             <div class="course" id="course-tip" v-if='hasCourse==0'>
              <image :src="imageSrc+'/Image/none.jpg'" style="width:304px;height:171px;"></image>
              <text class="pl40">敬请管理员</text>
              <text class="pl40">在后台添加课程</text>
            </div>
      </div>

      <div class="rank">
        <div class="rank-left">
          <text class="score-sort">学分排名</text>
          <text class="pl10 score-tip">总学分=必修课学分+选修课学分+考试学分</text>
        </div>
        <div class="rank-more">
          <a href="creditRanking.html" class="score-mwrap">
            <text class="score-more">更多</text>
            <text class="icon score-arrow">&#xe60d;</text>
          </a>
        </div>
      </div>
      <div class="enterprise ranking">
        <a href="creditRanking.html" class="ranking-wrap flex-row">
          <div class="flex-row ranking-div"><text class="ranking-txt">我的排名：</text> <text id="sort" class="ranking-num">{{mySort.sort}}</text></div>
          <div class="ml10 flex-row ranking-div ranking-div-ml20"><text class="ranking-txt">我的学分：</text> <text id="myCredit" class="ranking-num">{{mySort.myCredit}}</text></div>
        </a>
      </div>
      <!-- 学分排行 -->
      <div class="rankingList">
      <text v-if="sortList.length==0" class="fight">还没有人获得学分，快去学完课程争做第一名吧！</text>
      <div v-else>
        <div class="rank-tit por">
          <text class="rank-tcom rt1">排名</text>
          <text class="rank-tcom rt2">学霸信息</text>
          <text class="rank-tcom rt3">总学分</text>
        </div>
        <!-- 学分排名列表 -->
        <div>
          <div class="rank-li flex-row" v-for="(item,index) in sortList" :key='item.uuid'>
            <div class="img">
                <text :class="['rank-sort','rank-'+index]">{{index+1}}</text>
            </div>
              <!-- 用户头像 -->
              <div class="img-head"> 
                <image v-if="item.avatar" class="image-h" :src="item.avatar" style="width:72px;height:72px;"></image>
                <text class="img-txt" v-else :style="{backgroundColor:item.avatarColour}">永晨</text>
              </div>
              <div class="rank-info">
                  <div class="rank-info-wrap">
                    <text class="user-name">{{item.userName}}</text>
                    <text class="dep-name" style="lines:1;" lines='1'>{{item.deptNames}}</text>
                    <div class="user-score flex-row"><text class="rank-score-num">{{item.totalCredit}}</text><text class="user-s-tip">学分</text></div>
                  </div>
              </div>
          </div>
          
        </div>
      </div>
      </div>
    </div>
  </scroller>
  <div class="footer">
    <div class="footer-item active" data-title="首页">
      <a class="footer-a" href="./dingdingIndex.html">
        <text class = "icon fosi22 fgray fsec">&#xe6da;</text>
        <text class="footer-tit fsec">首页</text>
      </a>
    </div>
    <div class="footer-item" data-title="学吧">
      <a class="footer-a" href="./mySubscribeCourse.html">
        <text class = "icon fosi22 fgray">&#xe625;</text>
        <text class="footer-tit">学吧</text>
      </a>
    </div>
    <div class="footer-item" data-title="考场">
      <a class="footer-a" href="../Exam/examList.html">
        <text class = "icon fosi22 fgray">&#xe660;</text>
        <text class="footer-tit">考场</text>
      </a>
    </div>
    <div class="footer-item" data-title="我的">
      <a class="footer-a" href="../Mine/mine.html">
        <text class = "icon fosi22 fgray">&#xe6cc;</text>
        <text class="footer-tit">我的</text>
      </a>
    </div>
  </div>

    <!-- 升级提示窗 -->
    <div class="toolTip" v-if="updateShow">
     <div class="popup">
        <div class="picture">
          <image :src="updateInfo.imgPath" style="width:540px;height:390px;border-radius:10px;"></image>
        </div>
        <div class="textContent">
          <text class="text-tit">{{updateInfo.title}}</text>
          <text class="text-desc">{{updateInfo.introduction}}
          </text>
          <div class="btn flex-row">
           <a class="tip-info-wrap" :href="'../Mine/noticeDetails.html?uuid='+updateInfo.uuid "><text class="tip-info">查看详情</text></a>
           <text class="tip-know" @click="updatehide">知道了</text>
          </div>
        </div>
     </div>
   </div>

      <!-- 满天星提示窗口 -->
      <div class="starcover" v-if="skyStar">
        <div class="star-wrap">
          <div class="star-close" @click="closeStar"><text class="icon star-chahao" >&#xe665;</text></div>
          <div class="star-part1">
            <text class="tac star-part1-p">恭喜您获得</text>
            <div class="flex-row align-center">
              <text class="star-p1 fos16">授客学堂</text><text class="star-orange fos16">超级福利</text>
            </div>
          </div>
          <div class="star-part2">
            <image style="width:540px;height:246px;" :src="imageSrc+'/Image/starPic.jpg'"></image>
            <div class="flex-row align-center star-p18">
              <text class="fosi15">30天</text>
              <text class="fosi15 star-red">不限人数免费试用</text>
              <text class="fosi15 star-orange">价值1000元</text>
            </div>
            <a href="" class="user-now"><text class="user-now-txt">立即体验</text></a>
          </div>
          <div class="star-part3">
            <text class="fosi11 star-part3-p1">2017年6月30号之前</text>
            <text class="fosi11 star-part3-p2">购买授客学堂任意套餐，均可获赠价值</text>
            <text class="fosi11 star-part3-p3">3千元四套培训资料包和1200元正版课程</text>
            <text class="fosi11 star-part3-p4">活动最终解释权归青岛翰特网络科技有限公司所有</text>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
  import * as util from '../../lib/util.js';
  const stream  = weex.requireModule('stream'); //数据交互模块
  const storage = weex.requireModule('storage'); //本数据存储模块

  export default {
    name: 'home',
    data: function(){
      return {
        mySort           :'',   //我的排名
        sortList         :'',   //学分排名列表
        categoryList     :'',   //选课中心-分类
        courseUpdateData :'',   //选课中心-更新数量
        hasCourse        :'',   //选课中心-课程数量(判断是否显示默认课程)
        courseList       :'',   //选课中心-课程列表
        ccp              :'',   //判断是否显示党建模块
        ccpInfo          :'',   //党建数据
        punchCard        :'',   //打卡
        punchCardList    :'',   //打卡人员列表
        isCard           :'',   //是否打卡
        imageSrc         :util.imgSrc,  //图片引用路径
        skyStar          :false,        //满天星活动窗口是否展示
        updateInfo       :'',           //升级信息
        updateUuid       :'',           //本地更新uuid
        updateShow       :false,        //是否展示升级信息窗口
        jump             :util.jump,    //跳住链接
      }
    },
    methods: {
      // 获取首页相关信息
      getIndex (callback) {
        return stream.fetch({
          method: 'GET',
          type: 'json',
          url: util.hostUrl + 'User/Index/index?userId='+util.dingUser.userId+'&companyId='+util.dingUser.companyId
        }, callback)
      },
      // 是否展示党建
      getDang (callback){
        return stream.fetch({
          method: 'GET',
          type: 'json',
          url: util.hostUrl + 'User/Company/getCompanyInSpecialTraining?userId='+util.dingUser.userId+'&companyId='+util.dingUser.companyId
        },callback)
      },
      //获取党建数据
      getDangInfo (callback){
        return stream.fetch({
          method: 'GET',
          type: 'json',
          url: util.hostUrl + 'Course/SpecialTraining/getSpecialTrainingList?userId='+util.dingUser.userId+'&companyId='+util.dingUser.companyId+'&page=1&pageSize=1',
        },callback)
      },
      //获取打卡信息
      getCard (callback){
        return stream.fetch({
          method: 'GET',
          type: 'json',
          url: util.hostUrl + 'Course/ClockLearning/getHomeClock?userId='+util.dingUser.userId+'&companyId='+util.dingUser.companyId,
        },callback)
      },
      // 关闭满天星活动提示窗口
      closeStar (){
        this.skyStar=false;
      },
      // 获取更新提示信息
      getUpdate (callback){
        return stream.fetch({
          method: 'GET',
          type: 'json',
          url: util.hostUrl + 'User/System/getLastVersionLog?userId='+util.dingUser.userId+'&companyId='+util.dingUser.companyId,
        },callback)
      },
      // 关闭升级提示窗口
      updatehide (){
        this.updateShow = false;
      },
      //链接跳转
      openLink (url){
        util.openUrl(url);
      }
    },
    created: function() {
        var domModule = weex.requireModule('dom');
        //目前支持ttf、woff文件，不支持svg、eot类型
        domModule.addRule('fontFace', {
            'fontFamily': "iconfont2",
            'src': "url('http://at.alicdn.com/t/font_2hwcaxughus1yvi.ttf')"
        });
    },
    mounted: function(){
      let _self = this;

      // 设置导航标题
      util.setTitle({title:'首页'})

      // 获取本地更新uuid
      storage.getItem('upgrades',event => {
        this.updateUuid = event.data;
      });

      //获取更新信息
      this.getUpdate ( res => {
        let data = res.data.data;

        if(res.data.status == 'ok' && data.haslog && data.showNew){
          if(this.updateUuid != data.data.uuid){
              this.updateShow = true; //展示升级窗口
              this.updateInfo = data.data;  //展示数据
              storage.setItem('upgrades',data.data.uuid);
          }
        }
      })

      // 设置学分排行
      this.getIndex( res => {
        this.sortList = res.ok ? res.data.data.creditList : console.log(res.data.message);
        this.mySort = res.data.data.myCreditInfo;
        this.categoryList = res.data.data.categoryList;
        this.courseUpdateData = res.data.data.courseUpdateData;
        this.hasCourse = res.data.data.hasCourse;
        this.courseList = res.data.data.courseList;
      })

      // 党建模块是否展示
      this.getDang( res => {
        let data = res.data.data;
        if(!res.ok){console.log(res.data.message)}
        if(data.specialTraining){
          this.ccp = true;
          //党建数据获取
          this.getDangInfo( res => {
            let data = res.data.data;
            this.ccpInfo = data[0];
          })
        }
      })

      // 打卡
      this.getCard( res =>{
        let data = res.data.data;
        this.punchCard = data.info;
        this.isCard = data.isClock;
        this.punchCardList = data.logUserList;
      })
     
    },
  }
</script>
<style scoped>
/*幻灯片样式*/
.image {
  width: 750px;
  height: 312px;
}
.slider {
  width: 750px;
  height: 312px;
}
.frame {
  width: 750px;
  height: 312px;
  position: relative;
}
.indicator {
   width:714px;
   height:200px;
   position:absolute;
   top:1px;
   left:1px;
   item-color: red;
   item-selectedColor: blue;
   item-size: 20px;
 }
 /*幻灯片样式 End*/

/*===正式样式开始===*/
.wrapper{background-color: #fff;}
.bb8{
    border-bottom-style: solid;
    border-bottom-width: 16px;
    border-bottom-color: #EEE;
}
/*字体图标设置*/
.icon{
  font-family: iconfont2
}
/*字体图标设置End*/

/*顶部四个按钮导航样式*/
.scroll-wrap{
  background-color: #fff;
}
.top-nav {
    padding-bottom: 20px;
    padding-top: 30px;
    background-color: #fff;
    flex-direction: row;
}
.top-nav-list{
  flex:1;
}
.top-nav-a{
  align-items:center;
}
.top-nav-txt{
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  color: #222;
}
/*顶部四个按钮导航样式 End*/

/*党建模块 Start*/
.ccp{
  font-size: 0;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 28px;
  margin-top: 20px;
}
.ccp-a{
  position: relative;
  flex-direction: row;
}
.ccp-left {
  padding-right: 22px;
  border-right-style: solid;
  border-right-width:1px;
  border-right-color:#CCCCCC;

}
.icon-dang{
    width: 66px;
    height: 66px;
    text-align: center;
    line-height: 66px;
    border-radius: 50%;
    color: #FEF200;
    font-size: 36px;
    background-color: #CA1C1D;
}
.ccp-new{
  font-size: 32px;
  color:#F2762E;
} 
.ccp-txt{
    font-size: 28px;
    color: #CA1C1D;
    font-weight: 700;
    padding-top: 3px;
    text-align: center;
}
.ccp-right{
  flex:1;
  justify-content: space-between;
  vertical-align: top;
  padding-left: 12px;
}
.ccp-right-arrow{
  position: absolute;
  right: -7px;
  top: 15px;
  font-size: 40px;
  color: #666;
}
.ccp-right-top{
  flex-direction: row;
}
.ccp-date{
  padding-right: 35px;
  padding-top: 7px;
  font-size: 24px;
  color:#989595;
}
/*党建模块 End*/

/*打卡学习 Start*/
.punchCard{
  border-bottom-style:solid;
  border-bottom-width:19px;
  border-bottom-color:#eee;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #fff;
  position: relative;
}
.clockLog {
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 20px;
}
.cardimg {
    width: 80px;
    height: 80px;
    margin-top: 16px;
    margin-right: 16px;
    margin-left: 16px;
}
.clock-desc {
    margin-top: 16px;
    flex-direction: row;
    flex: 1;
}
.clock-line {
    height: 80px;
    width: 1px;
    background-color: #ccc;
}
.clock-txt {
    flex: 1;
    justify-content: space-between;
}
.clockLogtime {
    line-height: 33px;
    text-indent: 63px;
    font-size: 14px;
    padding-left: 16px;
    flex-direction: row;
    /*align-items: flex-;*/
}
.clock-title{
  font-size: 28px;
  /*float: left;
  width: 70%;*/
  margin-top: 3px;
  color: #333;
  margin-bottom: 0;
  padding-left: 8px;
  padding-right: 8px;
}
.clock-date,.clock-shijian{
  font-size: 28px;
  color:#28c195;
}
.clock-right-arrow{
  position: absolute;
  right: 8px;
  top: 15px;
  font-size: 40px;
  color: #666;
}
.clockLogList {
    overflow: hidden;
    height: 64px;
    flex-direction: row;
    align-items: center;
}
.clock-new{
  margin-left: 16px;
  font-size: 24px;
  color: #999;
}
.punchCardList {
    flex-direction: row;
}
.headImg{
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 24px;
    margin-left: 12px;
    background-color: #14c145;
}
/*打卡学习 End*/

/*选课中心 Start*/
.choose-lesson{
  margin-top: 16px;
  padding-bottom: 24px;
}
.cupdate{
    padding-left: 18px;
    padding-right: 18px;
    line-height: 64px;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.update-wrap{
  flex-direction: row;
  align-items:center;
}
.update-txt{
    font-size: 24px;
    color: #666666;
}
.update-num{
  color: #28c195;
  font-size: 24px;
  padding-left: 2px;
  padding-right: 2px;
}
.weight{
  font-size: 32px;
  font-weight: 700;
  color:#333;
}
.type-wrap {
    padding-top: 10px;
    padding-bottom: 24px;
    padding-right: 18px;
    padding-left: 18px;
}
.ctype{
  flex-direction: row;
}
.choose-arr{
  font-size: 28px;
  margin-left: 6px;
}
.ctype-list{
    height: 40px;
    line-height: 36px;
    font-size: 20px;
    color: #999;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 14px;
    margin-right: 22px;
    border-style:solid;
    border-width:1px;
    border-color:#cccccc;
}
.w-renshu{
  font-size: 24px;
  padding-right: 4px;
  color: #666;
}
.lorange{
  color:#f2762e;
}
.course-star {
    height: 36px;
    line-height: 36px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
    flex-direction: row;
    justify-content: space-between;
}
.course-flex-wrap{
    height: 36px;
    line-height: 36px;
    font-size: 28px;
}
.flex-row{
  flex-direction: row;
}
.course-title {
  font-size: 28px;
  line-height: 56px;
  overflow: hidden;
  color: #222;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}
.course-people{
  flex-direction: row;
  align-items: center;
}
.course-pnum{
    color: #666;
    font-size: 28px;
}
.course {
    width: 340px;
    height: 312px;
    margin-bottom: 30px;
    background-color: #fff;
    overflow: hidden;
    border-style:solid;
    border-width:1px;
    border-color:#DCDCDC;
    box-shadow: 0px 1px 3px #BEBEBE;
}
.select-lesson{
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 3px;
}
.course-time{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 44px;
    line-height: 44px;
    background-color: rgba(0,0,0,.5);
    font-size: 22px;
    text-align: center;
    color: #fff;
    width: 338px;
}
.wei-txt{
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    color: #fff;
    font-size: 24px;
    border-radius: 4px;
    margin-right: 12px;
    background-color: #f2762e;
}
.wei-title{
    font-size: 28px;
    color: #222;
    padding-left: 10px;
    padding-right: 10px;
}
.w-teacher{
  padding-left: 10px;
  padding-right: 10px;
  flex-direction: row;
  align-items:center;
  justify-content: space-between;
}
.w-js {
  font-size: 24px;
  padding-right: 2px;
  color: #f2762e;
}
.w-tname {
  color: #59afeb;
  font-size: 24px;
  color: #666;
  overflow: hidden;
}
.w-tit{
  height: 56px;
  line-height: 56px;
  color: #222;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
  flex-direction: row;
  align-items: center;
}
.pl40{
  padding-top: 10px;
  padding-left: 40px;
}
/*选课中心 End*/

/*学分排名 Start*/
.rank {
  padding-top: 15px;
  padding-right: 8px;
  padding-left: 8px;
  border-top-style:solid;
  border-top-width: 16px;
  border-top-color: #eee;
  flex-direction: row;
  align-items: flex-end;
  justify-content:space-between;
}
.score-sort{
  font-size: 32px;
  color: #333;
  font-weight: 700;
}
.score-tip{
  font-size: 20px;
  color: #999;
  padding-left: 8px;
}
.score-mwrap{
  flex-direction: row;
}
.score-more{
  font-size: 24px;
  color: #999;
  /*margin-top: 8px;*/
}
.score-arrow{
  color: #999;
  font-size: 20px;
}
.rank-left{
  flex-direction: row;
  align-items:flex-end;
}
.ranking-wrap{
  padding-left: 9px;
  padding-right: 9px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.ranking-txt{
  font-size: 28px;
  color: #28c195;
}
.ranking-num{
  color: #f37327;
  font-size: 28px;
}
.ranking-div{
  align-items:center;
}
.ranking-div-ml20{
  margin-left: 20px;
}
.rank-tit{
  margin-left: 18px;
  margin-right: 18px;
  padding-bottom: 4px;
  flex-direction: row;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-bottom-color:#D7D7D7;
}
.rank-tcom{
  font-size: 24px;
  color: #666;
}
.rt1{
  padding-left: 12px;
}
.rt2{
  padding-left: 142px;
}
.rt3{
  padding-left: 312px;
}
.fight{
  font-size:28px;
  color:#999;
  padding-bottom: 50px;
  padding-left: 9px;
}
.rank-li{
  overflow: hidden;
  margin-top: 10px;
  margin-left: 18px;
  margin-right: 18px;
  align-items:center;
}
.rank-info-wrap{
  flex-direction: row;
      justify-content: space-between;
}
.img-txt{
  width: 72px;
  height: 72px;
  line-height: 72px;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 22px;
}
.image-h{
  border-radius:50%;
}
.img{
  width: 40px;
  position: relative;
  margin-right: 28px;
  margin-left: 16px;
  padding-bottom: 20px;
  overflow: hidden;
}
.rank-sort{
  font-size: 24px;
  color:#fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius:10px;
}
.rank-0 { background-color: #FE633A; }
.rank-1{ background-color: #F56C85; }
.rank-2{ background-color: #FDA32F; }
.rank-3{ background-color: #37D7E5; }
.rank-4{ background-color: #8CDA39; }
.rank-score-num{
  font-size: 26px;
  color: #f2762e;
}
.user-score{
  align-items:center;
}
.footer-tit{
  font-size: 24px;
  color: #808080;
}
.img-head{
  border-bottom-width:1px;
  border-style:solid;
  border-color:#eee;
  padding-left: 18px;
  padding-bottom: 20px;
  height: 94px;
}
.rank-info{
  flex:1;
  padding-bottom: 20px;
  padding-left: 32px;
  height: 94px;
  border-style:solid;
  border-color:#eee;
  border-bottom-width:1px;
  justify-content:center;

}
.user-name{
  width: 86px;
  font-size: 28px;
  color:#222;
}
.dep-name {
  width: 261px;
  font-size: 24px;
  color: #999;
  /*padding-left: 58px;*/
}
.user-s-tip{
  font-size: 20px;
  color: #999;
}
/*学分排名 End*/

/*footer Start*/
.footer {
  height: 98px;
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #f7f7f7;
  border-top-color: #aaa;
  border-top-style: solid;
  border-top-width: 1px;
  flex-direction: row;
}
.footer-item{
  flex:1;
}
.footer-a{
  align-items: center;
}
.fosi22{font-size:44px;}
.fosi26{font-size:44px;}
.fgray{color:#bbb;}
.fsec{ color:#28c195; }
/*footer End*/
/*满天星提示窗口 Start*/
.starcover{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
}
.star-wrap{
  position: relative;
  left: 105px;
  top: 200px;
  width: 540px;
  height: 780px;
  background-color: #fff;
  border-radius:15px;
  text-align: center;
}
.star-close{
  position: absolute;
  right: 16px;
  top: 14px;
  width: 50px;
  height: 50px;
  background-color: #CCC;
  border-radius: 50%;
}
.star-chahao{
  font-size:32px;
  text-align: center;
  line-height: 50px;
}
.star-part1 {
    margin-top: 64px;
}
.align-center{
  align-items:center;
  justify-content: center;
}
.star-orange{
  color: #ffae00;
}
.tac{
  text-align: center;
}
.star-part1-p{
  font-size: 32px;
  padding-bottom: 20px;
}
.star-p18{
  font-size: 15px;
  padding-top: 32px;
  padding-bottom: 32px;
}
.fos16{font-size:32px;}
.fos15{font-size:30px;}
.star-red {
    color: #ff5855;
}
.user-now{justify-content:center;align-items:center;}
.user-now-txt{
    width: 280px;
    height: 70px;
    line-height: 70px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    text-align: center;
    background-color: #EE4240;
    border-radius: 20px;
}
.fosi11{
  font-size: 22px;
}
.star-part3-p1,.star-part3-p2,.star-part3-p3,.star-part3-p4{color:#666;text-align: center;padding-top: 6px;}
.star-part3-p1{
  padding-top: 30px;
}
.star-part3-p4{
  padding-top: 50px;
  color:#ccc;
}
/*满天星提示窗口 End*/
/*升级公告窗口 Start*/
.toolTip {
    background-color: rgba(0, 0, 0,0.5);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.popup {
    position: absolute;
    width: 540px;
    /*height: 814px;*/
    margin: auto;
    left: 105px;
    top: 200px;
    border-radius: 20px;
    background-color: #fff;
}
.picture{
  height: 390px;
  border-radius: 10px;
}
.text-tit{
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 44px;
    font-size: 32px;
    color: #222;
}
.text-desc{
    font-size: 28px;
    line-height: 38px;
    color: #8b8b8b;
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 10px;
}
.btn {
  height: 90px;
  overflow: hidden;
  border-top-style:solid;
  border-top-width:1px;
  border-top-color:#ededed;;
}
.tip-info-wrap,.tip-know{flex:1;}
.tip-info,.tip-know{
  height: 90px;
  line-height: 90px;
  text-align: center;
  font-size: 32px;
  color: #34c49b;
}
.tip-info{
  border-right-style:solid;
  border-right-color:#ededed;
  border-right-width:1px;
}

/*升级公告窗口 End*/
</style>
